<template>
  <div class="page-container">
    <h2 style="margin-bottom: 20px;">个人中心</h2>
    
    <t-card title="基本信息" style="margin-bottom: 20px;">
      <t-form :data="userInfo" label-width="100px" style="max-width: 400px;">
        <t-form-item label="用户名">
          <t-input v-model="userInfo.username" disabled />
        </t-form-item>
        <t-form-item label="邮箱">
          <t-input v-model="userInfo.email" />
        </t-form-item>
        <t-form-item label="手机号">
          <t-input v-model="userInfo.phone" />
        </t-form-item>
        <t-form-item label="状态">
          <t-tag :theme="userInfo.status === 1 ? 'success' : 'danger'" variant="light">
            {{ userInfo.status === 1 ? '正常' : '禁用' }}
          </t-tag>
        </t-form-item>
        <t-form-item label="创建时间">
          <span>{{ userInfo.created_at }}</span>
        </t-form-item>
        <t-form-item>
          <t-button theme="primary" @click="handleSave">保存信息</t-button>
        </t-form-item>
      </t-form>
    </t-card>
    
    <t-card title="修改密码">
      <t-form :data="passwordForm" :rules="passwordRules" label-width="100px" style="max-width: 400px;">
        <t-form-item label="当前密码" name="currentPassword">
          <t-input v-model="passwordForm.currentPassword" type="password" placeholder="请输入当前密码" />
        </t-form-item>
        <t-form-item label="新密码" name="newPassword">
          <t-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" />
        </t-form-item>
        <t-form-item label="确认密码" name="confirmPassword">
          <t-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" />
        </t-form-item>
        <t-form-item>
          <t-button theme="primary" @click="handleChangePassword">修改密码</t-button>
        </t-form-item>
      </t-form>
    </t-card>
    
    <t-card title="角色权限" style="margin-top: 20px;">
      <t-space direction="vertical" style="width: 100%;">
        <div v-for="role in userInfo.roles" :key="role.id" style="margin-bottom: 16px;">
          <h4 style="margin-bottom: 8px;">{{ role.name }}</h4>
          <t-space>
            <t-tag v-for="perm in role.permissions" :key="perm.id" theme="primary" variant="light">
              {{ perm.name }}
            </t-tag>
          </t-space>
        </div>
      </t-space>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import { useAuthStore } from '@/stores/auth'
import { userAPI } from '@/api/user'

const authStore = useAuthStore()

const userInfo = ref({
  id: 0,
  username: '',
  email: '',
  phone: '',
  status: 1,
  created_at: '',
  roles: [] as any[]
})

const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const passwordRules = {
  currentPassword: [{ required: true, message: '请输入当前密码' }],
  newPassword: [{ required: true, message: '请输入新密码' }],
  confirmPassword: [
    { required: true, message: '请确认新密码' },
    {
      validator: (val: string) => val === passwordForm.newPassword,
      message: '两次输入的密码不一致'
    }
  ]
}

const loadUserInfo = () => {
  if (authStore.user) {
    userInfo.value = { ...authStore.user }
  }
}

const handleSave = async () => {
  try {
    await userAPI.updateUser(userInfo.value.id, {
      email: userInfo.value.email,
      phone: userInfo.value.phone,
      status: userInfo.value.status
    })
    MessagePlugin.success('信息更新成功')
  } catch (error) {
    MessagePlugin.error('信息更新失败')
  }
}

const handleChangePassword = async () => {
  try {
    // 这里需要先验证当前密码，然后调用修改密码接口
    // 由于后端接口需要用户ID，这里需要根据实际情况调整
    MessagePlugin.warning('修改密码功能需要后端接口支持验证当前密码')
  } catch (error) {
    MessagePlugin.error('修改密码失败')
  }
}

onMounted(() => {
  loadUserInfo()
})
</script>